<div id="draft_overlay" class="overlay new-style" data-overlay="drafts">
    <div class="flex overlay-content">
        <div class="drafts-container overlay-messages-container overlay-container">
            <div class="overlay-messages-header">
                <h1>{{t 'Drafts' }}</h1>
                <div class="exit">
                    <span class="exit-sign">&times;</span>
                </div>
                <div class="header-body">
                    <div class="removed-drafts-message">
                        {{t "Drafts are not synced to other devices and browsers." }}
                        <br />
                        {{#tr}}Drafts older than <strong>{draft_lifetime}</strong> days are automatically removed.{{/tr}}
                    </div>
                    <div class="delete-drafts-group">
                        <div class="delete-selected-drafts-button-container">
                            <button class="button small rounded delete-selected-drafts-button" type="button" disabled>
                                <i class="fa fa-trash-o fa-lg" aria-hidden="true"></i>
                            </button>
                        </div>
                        <button class="button small rounded select-drafts-button" role="checkbox" aria-checked="false">
                            <span>{{t "Select all drafts" }}</span>
                            <i class="fa fa-square-o fa-lg select-state-indicator" aria-hidden="true"></i>
                        </button>
                    </div>
                </div>
            </div>
            <div class="drafts-list overlay-messages-list">
                <div class="no-drafts no-overlay-messages">
                    {{t 'No drafts.'}}
                </div>

                <div id="drafts-from-conversation">
                    <h2>{{narrow_drafts_header}}</h2>
                    {{#each narrow_drafts}}
                        {{> draft}}
                    {{/each}}
                </div>
                <div id="other-drafts">
                    <h2 id="other-drafts-header">{{t "Other drafts" }}</h2>
                    {{#each other_drafts}}
                        {{> draft}}
                    {{/each}}
                </div>
            </div>
        </div>
    </div>
</div>
